<template>
	<view class="">
		<view class="posifi width1000 bgfff height100 top0 flex-ju-b zindex3" :style="{paddingTop:shh+'px'}">
			<view class="flex-a-i ml15">
				<uni-icons @click="back" type="back" color="#333333" size="25"></uni-icons>
				<view class="flex-a-i ml5">
					<image class="wh70-70 ra70 image mr10" :src="info.user.avatar?info.user.avatar:'/static/mo.png'"></image>
					<view>
						<view class="color27A752 size29 bold">{{info.user.nickname}}</view>
						<view class="color999 size22 mt5">编辑于{{newdate(info.add_time)}}  广东</view>
					</view>
				</view>
			</view>
			<view class="flex-a-i size22 mr30">
				<view v-if="info.is_care" class="border333 wh120-50 ra50 flex-ju-c color333">
					<uni-icons type="checkmarkempty" color="#333" size="13"></uni-icons>
					已关注
				</view>
				
				<view v-else @click="addguanzhu" class="border27A752 wh115-50 ra50 flex-ju-c color27A752">
					<uni-icons type="plusempty" color="#27A752" size="10"></uni-icons>
					关注
				</view>
				
				<image @click="$refs.mshare.showshare()" mode="widthFix" class="image width40 ml30" src="/static/img/share.png"></image>
			</view>
		</view>
		<view class="posire mt100">
			<view class="posiab right30 wh50-50 ra50 top30 size22 flex-ju-c colorfff" style="background: rgba(0, 0, 0, 0.6);">
				{{tindex+1}}/{{info.imgs.length}}
			</view>
			
			<image @load="imgload" v-if="info.imgs.length&&info.imgs[0].path.endsWith('.mp4')" mode="widthFix" class="image imgloads posifi top-9999" :src="info.imgs[0].path"></image>
			
			<swiper @change="swchang"  :style="{height:sheight,paddingTop:shh+'px'}" class="swiper " circular >
				<swiper-item v-for="(item,g) in info.imgs" :key="g">
					<view class="swiper-item uni-bg-red">
						
						<view v-if="item.path.endsWith('.mp4')" class="posire ">
							<view class="posiab width1000  " :style="{height:sheight}"></view>
							<video muted autoplay class="image " :style="{height:sheight}" :src="item.path"></video>
						</view>
						
						<image v-else  class="image"  :style="{height:sheight}":src="item.path"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="flex-ju-c mt10">
				<view class="flex-a-i">
					<view v-for="(item,h) in info.imgs" :key="h" :class="{active:tindex == h}" class="wh10-10 bgccc  ml5 mr5 ra10"></view>
				</view>
			</view>
		</view>
			
		<view class="con pb120">
			<view class="color333 mt30 border-bEDEDED pb50 mb40">
				<view class="size35 bold mb20">{{info.title}}</view>
				<view>
					{{info.content}}
				</view>
			</view>
			<view class="color999 size26">共{{words.count}}条评论</view>
			<nodata v-if="words.count==0"></nodata>
			
			<view class="flex size26 mt30" v-for="(item,index) in words.list" :key="index">
				<image class="wh70-70 ra70 image mr10" :src="item.user.avatar?item.user.avatar:'/static/mo.png'"></image>
				<view  class="flex1 border-bEDEDED pb30">
					<view class="flex-ju-b">
						<view class="flex-a-i">
							<view class="color999">{{item.user.nickname}}</view>
							<!-- <view v-if="index==0" class="bgE7FBF3 color27A752 size20 wh63-35 ra35 flex-ju-c ml15">楼主</view> -->
						</view>
						<view @click="setlike(item)" class="posiab right30 width70 mt20 flex-ju-c flex-col" >
							<uni-icons v-if="item.is_like" type="heart-filled" color="#FF1E00" size="20"></uni-icons>
							<uni-icons v-else type="heart" color="#999" size="20"></uni-icons>
							<view>{{item.like_count}}</view>
						</view>
					</view>
					<view class="width500 mt10 line20 ">
							{{item.content}}
							<text class="color999 ml10 mr10">{{getday(item.add_time)}}</text><text @click="taphuifu(item)" class="nohuan">回复</text>
						
						<view class="mt30 flex"  v-for="(titem,tin) in item.allreply">
							<image class="wh50-50 ra50 image mr10" :src="titem.user.avatar?titem.user.avatar:'/static/mo.png'"></image>
							<view class="flex1 ">
								<view class="flex-ju-b">
									<view class="flex-a-i">
										<view class="color999">{{titem.user.nickname}}</view>
									</view>
									<view @click="setlike(titem)" class="posiab width70 right30 mt20 flex-ju-c flex-col" >
										<uni-icons v-if="titem.is_like"  type="heart-filled" color="#FF1E00" size="20"></uni-icons>
										<uni-icons v-else type="heart" color="#999" size="20"></uni-icons>
										<view>{{titem.like_count}}</view>
									</view>
								</view>
								<view class="width400 mt10 line20">
								 <template v-if="!titem.two">
									 回复<text class="color999">{{titem.other.nickname}}</text>
								 </template>	{{titem.content}}
									<text class="color999 ml10 mr10">{{getday(titem.add_time)}}</text><text @click="taphuifu(titem)" class="nohuan">回复</text>
								</view>
							</view>
						</view>
						
						<!-- <view class="color183667 ml60 mt20">查看更多回复</view> -->
						
					</view>
				</view>
			</view>
			
			
		</view>
		
		<!-- #ifdef H5 -->
			<view class="posifi width1000 bgfff flex-a-i bottom0 height120 border-tEDEDED size26">
				<view class="con">
					<view :style="{opacity:pacity}" class="flex-ju-b">
						<view @click="tablike" class="flex-a-i">
							<uni-icons v-if="info.is_like" type="heart-filled" color="#FF1E00" size="20"></uni-icons>
							<uni-icons v-else type="heart" color="#333" size="20"></uni-icons>
							{{info.like_count}}
						</view>
						<view @click="tapcollect" class="flex-a-i">
							<uni-icons v-if="info.is_collect" type="star-filled" color="#FFC000" size="20"></uni-icons>
							<uni-icons v-else type="star" color="#333" size="20"></uni-icons>
							{{info.collect_count}}
						</view>
						<view class="flex-a-i">
							<image mode="widthFix" class="image width30 mr5" src="/static/img/pings.png"></image>
							{{words.total_words}}
						</view>
						<view  class="flex-a-i wh270-70 ra70 bgEDEDED flex-ju-c">
							<image mode="widthFix" class="image width25" src="/static/img/bi.png"></image>
							<!-- <input v-model="content"  @blur="wtabord('')" class="size26 width170 pl10" placeholder="说点儿什么呗2~"/> -->
							<input v-model="content"   class="size26 width170 pl10" placeholder="说点儿什么呗2~"/>
						</view>
					</view>
				</view>
			</view>
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
		<view class="posifi width1000 bgfff flex-a-i bottom0 height120 border-tEDEDED size26">
			<view class="con">
				
				<view :style="{opacity:opacity}" class="flex-ju-c">
					<view class="posiab flex-ju-c" :style="{bottom:sbottom+'rpx'}" >
						<textarea @blur="textblue" v-model="content" :fixed="true" cursor-spacing="20" maxlength="-1" auto-height  :focus="focus" class="size26 pg25 width500 bgEDEDED  ra50 zindex600" placeholder="说点儿什么呗" />
						<view @click="wtabord('')" class="width100 height50 flex-ju-c ra10 color27A752 border42B983  ml15">确定</view>
					</view>
				</view>
				
				<view :style="{opacity:pacity}" class="flex-ju-b">
					<view @click="tablike" class="flex-a-i">
						<uni-icons v-if="info.is_like" type="heart-filled" color="#FF1E00" size="20"></uni-icons>
						<uni-icons v-else type="heart" color="#333" size="20"></uni-icons>
						{{info.like_count}}
					</view>
					<view @click="tapcollect" class="flex-a-i">
						<uni-icons v-if="info.is_collect" type="star-filled" color="#FFC000" size="20"></uni-icons>
						<uni-icons v-else type="star" color="#333" size="20"></uni-icons>
						{{info.collect_count}}
					</view>
					<view class="flex-a-i">
						<image mode="widthFix" class="image width30 mr5" src="/static/img/pings.png"></image>
						{{words.total_words}}
					</view>
					<view @click="tabfocus" class="flex-a-i wh270-70 ra70 bgEDEDED flex-ju-c">
						<image mode="widthFix" class="image width25" src="/static/img/bi.png"></image>
						<input disabled class="size26 width170 pl10" placeholder="说点儿什么呗~"/>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
	
	</view>
	
	<mshare ref="mshare"></mshare>
	

</template>

<script>
	export default {
		data() {
			return {
				sheight:"300px",
				sbottom:-150,
				pacity:1,
				opacity:0,
				focus:false,
				content:"",
				tindex:0,
				vitem:"",
				info:{
					imgs:[],
					user:{}
				},
				id:"",
				words:{
					list:[],
					count:0,
					total_words:0
				},
				siterm:[],
			}
		},
		onLoad(option) {
			uni.getLocation({
				type:"gcj02",
				geocode:true,
				success:(res)=>{
					console.log('当前位置的经度：' +JSON.stringify(res) );
				}
			});
			
			this.id = option.id
			this.http('/api/note_detail/'+option.id).then(res=>{
				this.info = res.data
			})
			
			this.getlists(option)
			
		},
		methods: {
			imgload(e){
				console.log("ttttt")
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.select('.imgloads').boundingClientRect(data => {
					  if (data) {
						this.sheight = data.height +'px'
					  }
					}).exec();
				},300)
				
			},
			tablike(){
				if(this.info.is_like){
					this.http('/api/lose_like/'+this.info.id,{},'post').then(res=>{
						this.info.is_like = false
						this.info.like_count--
						 
					})
				}else{
					this.http('/api/post_like/'+this.info.id,{},'post').then(res=>{
						this.info.is_like = true
						this.info.like_count++
					})
				}
				
			},
			tapcollect(){
				if(this.info.is_collect){
					this.http('/api/cancel_collect/'+this.id,{},'delete').then(res=>{
						this.info.is_collect = false
						this.info.collect_count--
					})
				}else{
					this.http('/api/post_collect/'+this.id,{},'post').then(res=>{
						this.info.is_collect = true
						this.info.collect_count++
						 
					})
				}
				
			},
			setlike(item){
				if(item.is_like){
					this.http('/api/lose_like/'+item.id,{type:2},'post').then(res=>{
						item.is_like = false
						item.like_count--
					})
				}else{
					this.http('/api/post_like/'+item.id,{type:2},'post').then(res=>{
						item.is_like = true
						item.like_count++
					})
				}
				
				
			},
			getlists(option){
				this.http('/api/words_list/'+this.id).then(res=>{
					this.vitem = ""
					res.data.list.map((item,index)=>{
						item.allreply=[]
						if(item.reply.length>0){
							this.lists(item.reply,item)
						}
					})
				
						this.words = res.data
					
				})
				
			},
			lists(arr,oitem){
				arr.map(item=>{
					item.two = true
					oitem.allreply.push(item)
					if(item.reply.length>0){
						this.slist(item.reply,oitem)
					}
					
				})
			},
			slist(arr,oitem){
				arr.map(item=>{
					item.two = false
					oitem.allreply.push(item)
					if(item.reply.length>0){
						this.slist(item.reply,oitem)
					}
					
				})
			},
			
			addguanzhu(){
				this.http('/api/add_care/'+this.info.user.uid,{},'post').then(res=>{
					this.info.is_care = true
					uni.showToast({
						title:"关注成功",
						icon:"none"
					})
				})
			},
			taphuifu(item){
				console.log(item)
				this.tabfocus(1)
				this.vitem = item
			},
			wtabord(type){
				if(this.vitem){
					if(this.content.trim()){
						var to_id,pid
						if(this.vitem.pid){
							to_id=this.vitem.id
							pid=this.vitem.pid
						}else{
							to_id=this.vitem.id
							pid=this.vitem.id
						}
						
						this.http('/api/post_words/'+this.id,{
							content:this.content,
							address:'不知道',
							to_id,
							pid
						},'post').then(res=>{
							uniCloud.callFunction({
							    name: 'text-push',
							    data: { 
									type:"pinglun"
								}
							  })
							  this.getlists()
						})
					}
				}else{
					console.log(1111)
					if(this.content.trim()){
						this.http('/api/post_words/'+this.id,{
							content:this.content,
							address:'不知道',
							to_id:'',
							pid:''
						},'post').then(res=>{
							uniCloud.callFunction({
							    name: 'text-push',
							    data: { 
									type:"pinglun"
								}
							  })
							  this.getlists()
						})
					}
				}
				
			},
			textblue(){
				 
				this.opacity=0
				this.sbottom = -150
				this.pacity=1
				this.$nextTick(()=>{
					this.focus = false
				})
			},
			tabfocus(){
				this.content = ""
				this.sbottom = 20
				this.opacity=1
				this.pacity=0
				this.$nextTick(()=>{
					this.focus = true
				})
			},
			swchang(e){
				this.tindex = e.detail.current
			}
		}
	}
</script>

<style>
.nohuan{
	white-space: nowrap;
}
.active{
		background: #27A752;
		width: 21rpx;
		border-radius: 5rpx;
	}
</style>
